<template>
  <div class="app-container calendar-list-container">

    <el-card>
      <!-- <div class="message">
        <el-tag type="primary" size="medium" style="width: 300px;height: 40px;text-align: center;font-size: 15px;vertical-align: middle;display: table-cell;">代金券审核</el-tag>
      </div> -->
      <el-select clearable class="filter-item" style="width: 200px;" placeholder="请选择审核状态" v-model="listQuery.value">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFind">查找</el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleCheck" :disabled="this.sels.length === 0 || this.listQuery.value === '2'">批量审核</el-button>
    </el-card>

    <!-- 兑换券详情 -->
    <el-card>

      <!-- 查询结果 -->
      <el-table size="small" :data="list" v-loading="listLoading" element-loading-text="正在查询中。。。" border fit highlight-current-row @selection-change="selsChange">
        <el-table-column type="selection" width="55"></el-table-column>

        <el-table-column align="center" width="100px" label="id" prop="id" hidden="true">
        </el-table-column>

        <el-table-column align="center" min-width="100px" label="机构id" prop="mechanismId">
        </el-table-column>

        <el-table-column align="center" min-width="100px" label="审核提交时间" prop="addTime">
        </el-table-column>

        <el-table-column align="center" min-width="100px" label="审核通过时间" prop="transitTime">
        </el-table-column>

        <el-table-column align="center" min-width="100px" label="服务项目id" prop="goodsId">
        </el-table-column>

        <el-table-column align="center" min-width="100px" label="审核状态" prop="isCheck" :formatter="formatRoleType" >
          <!-- <template slot-scope="scope">
          <el-tag>{{scope.row.isCheck | orderStatusFilter}}</el-tag>
        </template> -->
        </el-table-column>

        <el-table-column align="center" min-width="100px" label="描述" prop="describe">
        </el-table-column>

        <el-table-column align="center" min-width="100px" label="服务项目名称" prop="goodsName">
        </el-table-column>

        <el-table-column align="center" label="操作" width="250" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleAuditing(scope.row)" v-if="scope.row.isCheck == 1 || scope.row.isCheck == 0">审核</el-button>
            <el-tag type="success" v-if="scope.row.isCheck == 2">已通过</el-tag>
            <el-tag type="danger" v-if="scope.row.isCheck == 3">未通过</el-tag>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[10,20,30,50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>

      <!-- 弹出审核框 -->
      <el-dialog title="兑换券详情" :visible.sync="dialogFormVisible">
        <el-form ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="150px" style='width: 400px; margin-left:100px;'>
          <el-form-item label="兑换券id:">
            <el-tag v-text="dataForm.id"></el-tag>
          </el-form-item>
          <el-form-item label="兑换券名称:" prop="name">
            <el-tag v-text="dataForm.name"></el-tag>
          </el-form-item>
          <el-form-item label="兑换券图片">
            <img v-if="dataForm.picUrl" :src="dataForm.picUrl" class="avatar">
          </el-form-item>
           <el-form-item label="兑换券画廊">
              <img class="gallery" v-for="pic in dataForm.gallery" :key="pic" :src="pic" />
            </el-form-item>
          <el-form-item v-if="dataForm.discountsAddTime != null" label="兑换券优惠开始时间:" prop="discountsAddTime" style="width: 300px;">
            <el-tag v-text="dataForm.discountsAddTime"></el-tag>
          </el-form-item>
          <el-form-item v-if="dataForm.discountsEndTime != null" label="兑换券优惠结束时间:" prop="discountsEndTime" style="width: 300px;">
            <el-tag v-text="dataForm.discountsEndTime"></el-tag>
          </el-form-item>
        </el-form>
        <div class="reason">
          <el-input v-model="ids.reason" type="textarea" :rows="2" placeholder="不通过需要的原因">
          </el-input>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button size="mini" @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" size="mini" @click="accepts">通过</el-button>
          <el-button type="danger" size="mini" @click="refuses">不通过</el-button>
        </div>
      </el-dialog>

      <el-dialog title="批量审核" :visible.sync="checkAllVisible">
        <el-form ref="checkForm" :model="checkForm" status-icon label-position="left" label-width="150px" style='width: 400px; margin-left:100px;'>

        </el-form>
        <div class="reason">
          <el-input v-model="checkForm.reason" type="textarea" :rows="2" placeholder="不通过需要的原因">
          </el-input>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button size="mini" @click="checkAllVisible = false">取消</el-button>
          <el-button type="primary" size="mini" @click="acceptss">通过</el-button>
          <el-button type="danger" size="mini" @click="refusess">不通过</el-button>
        </div>
      </el-dialog>

    </el-card>
  </div>
</template>

<script>
import { listAuditing, showGoods, accept, acceptAll, refuse } from '@/api/goodsCheck'

const statusMap = {
  0: '未审核',
  1: '审核中',
  2: '已用过',
  3: '未通过'
}

export default {
  name: 'Auditing',
  data() {
    return {
      list: null,
      total: undefined,
      listLoading: true,
      dialogFormVisible: false,
      checkAllVisible: false,
      statusMap,
      num: '',
      options: [
        {
          value: '0',
          label: '未审核'
        },
        {
          value: '1',
          label: '审核中'
        },
        {
          value: '2',
          label: '已通过'
        },
        {
          value: '3',
          label: '未通过'
        }
      ],
      sels: [],
      listQuery: {
        page: 1,
        limit: 10,
        value: '1',
        sort: '',
        order: 'desc'
      },
      checkForm: {
        type: undefined,
        ids: undefined,
        goodsIds: undefined,
        reason: undefined
      },
      dataForm: {
        id: undefined,
        name: undefined,
        picUrl: undefined,
        gallery: [],
        discountsAddTime: undefined,
        discountsEndTime: undefined
      },
      ids: {
        checkId: undefined,
        goodsId: undefined,
        reason: undefined
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    filters: {
      orderStatusFilter(status) {
        return statusMap[status]
      }
    },
    selsChange(sels) {
      this.sels = sels
    },
    resetCheck() {
      this.checkForm = {
        type: undefined,
        ids: undefined,
        goodsIds: undefined,
        reason: undefined
      }
    },
    handleCheck() {
      console.log(this.sels.length)
      var servids = this.sels.map(item => item.id).join(',')
      var goodsIds = this.sels.map(item => item.goodsId).join(',')
      this.checkForm.ids = servids
      this.checkForm.goodsIds = goodsIds
      this.checkAllVisible = true
    },
    acceptss() {
      this.$refs['checkForm'].validate(valid => {
        if (valid) {
          this.checkForm.type = 2
          acceptAll(this.checkForm).then(() => {
            this.checkAllVisible = false
            this.resetCheck()
            this.$notify({
              title: '成功',
              message: '审核成功',
              type: 'success',
              duration: 2000
            })
            this.getList()
          })
        }
      })
    },
    refusess() {
      if (this.checkForm.reason == null) {
        this.$alert('如果选择不通过则需填写原因！', {
          confirmButtonText: '确定',
          type: 'warning'
        })
        return false
      }
      this.$refs['checkForm'].validate(valid => {
        if (valid) {
          this.checkForm.type = '3'
          acceptAll(this.checkForm).then(() => {
            this.checkAllVisible = false
            this.resetCheck()
            this.$notify({
              title: '成功',
              message: '审核成功',
              type: 'success',
              duration: 2000
            })
            this.getList()
          })
        }
      })
    },

    formatRoleType: function(row, column) {
      return row.isCheck === 0
        ? '未审核'
        : row.isCheck === 1 ? '审核中' : row.isCheck === 2 ? '已通过' : row.isCheck === 3 ? '未通过' : '其他'
    },
    handleFind() {
      this.getList()
    },
    getList() {
      this.listLoading = true
      listAuditing(this.listQuery)
        .then(response => {
          this.list = response.data.data.list
          this.total = response.data.data.total
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    init() {
      this.listQuery.page = 1
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },

    handleAuditing(row) {
      this.ids.checkId = row.id
      this.dataForm = Object.assign({}, row)
      showGoods(this.dataForm).then(response => {
        this.dataForm = response.data.data.goods
        this.ids.goodsId = this.dataForm.id
      })
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    accepts() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.ids.goodsId = parseInt(this.ids.goodsId)
          this.ids.checkId = parseInt(this.ids.checkId)
          accept(this.ids).then(() => {
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '审核成功',
              type: 'success',
              duration: 2000
            })
            this.getList()
          })
        }
      })
    },
    refuses() {
      if (this.ids.reason == null) {
        this.$alert('如果选择不通过则必须填写原因！', {
          confirmButtonText: '确定',
          type: 'warning'
        })
        return false
      }
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.ids.goodsId = parseInt(this.ids.goodsId)
          this.ids.checkId = parseInt(this.ids.checkId)
          refuse(this.ids).then(() => {
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '审核成功',
              type: 'success',
              duration: 2000
            })
            this.getList()
          })
        }
      })
    }
  }
}
</script>
<style>
.alipay {
  width: 200rect;
  height: 100rect;
  background-color: red;
}
.rra {
  margin-bottom: 100px;
}
.abimg {
  margin-bottom: -15px;
  height: 40px;
}
.reason {
  width: 300px;
  text-align: center;
  margin-left: 52px;
}
.choice {
  margin-top: 20px;
}
.gallery {
  width: 80px;
  margin-right: 10px;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
</style>
